.common-layout {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.header-content {
  background-color: #6484fc;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  justify-content: space-between;
  width: 100%;
  position: fixed;
  /* 设置固定定位 */
  z-index: 999;

  /* 设置较高的 z-index 值，使头部在其他元素之上悬浮显示 */
  .font-bold {
    width: 10%;
    font-size: x-large;
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: aliceblue;
    text-align: middle;

  }

  .font-home-page {
    padding-left: 3%;
    width: 4%;
    a {
      font-size: large;
      font-family: Georgia, 'Times New Roman', Times, serif;
      color: aliceblue;
      text-align: middle;
      margin-left: 8%;
      text-decoration: none;
    }
  }
  .font-login {
    font-size: large;
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: aliceblue;
    text-align: middle;
    margin-left: 35%;
  }

  .font-register {
    text-align: middle;
    margin-left: 1%;
  }

  .font-hint {
    text-align: middle;
    margin-left: 1%;
  }

  .header-div {
    height: 100%;
    display: flex;
    align-items: center;

    img {
      border-radius: 50%;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
      height: 40px;
      width: 40px;
      margin-left: 15%;
    }
  }
}

.el-row-style {
  padding-top: 60px;
}



.first-piece {
  background-color: #5c7cfc;
  height: 400px;

  .image-container {
    background-image: url("@/assets/images/bg1.jpg");
    background-size: auto;
    height: 100%;
    width: 50%;
    float: right; // 让图片浮动在左侧  

    img {
      width: 80%;
      height: 50%;
      padding-top: 3%;
    }
  }

  .text-container {
    float: left;
    width: 50%;
    text-align: center;
    justify-content: center;
    align-items: center;
    color: aliceblue;
    height: 100%;

    div {
      padding-top: 15%;
    }
  }
}

/* 第二块 */
.second-piece {
  background-color: aliceblue;
  height: 3rem;
  text-align: center;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size: x-large;

  .card-bg {
    background-color: #f5f6fa;

    span {
      font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
      font-size: large;
      font-weight: bold;
    }
  }

  .title-font {
    display: inline-block;
    margin-top: 2%;
    margin-bottom: 4%;
  }

}

/* 第三块 */
.third-piece {
  position: relative;
  background-image: url("@/assets/images/bg3.png");
  background-repeat: repeat;
  background-size: 100% 100%;
  height: 3rem;
  text-align: center;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size: x-large;

  .title-font {
    display: inline-block;
    margin-top: 3%;
    margin-bottom: 1%;
  }

  .image-container {
    position: relative;
    width: 50%;
    float: right; // 让图片浮动在左侧  

    .base-image {
      display: block;
      width: 45%;
      height: 30%;
    }

    .overlay-image {
      position: absolute;
      width: 20%;
      height: 40%;
      top: 30%;
      /* 调整叠加图片的位置 */
      left: 30%;
      /* 调整叠加图片的位置 */
      z-index: 1;
      /* 设置叠加图片的层叠顺序，值越大表示越在上面 */
    }


  }

  .text-container {
    float: left;
    width: 50%;
    text-align: left;
    justify-content: center;

    p {
      padding-left: 40%;
      margin-top: 10px;
      margin-bottom: 10px;
      line-height: 1.5;
      /* 调整行高 */
    }

  }
}

/* 第四块 */
.fourth-piece {
  background-repeat: repeat;
  background-size: 100% 100%;
  height: 3rem;
  text-align: center;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size: x-large;

  .fourth-padding {
    padding-top: 1%;
    padding-bottom: 1%;
  }

  .image-container {
    position: relative;
    width: 40%;
    float: left; // 让图片浮动在左侧   

    .base-image {
      display: block;
      width: 48%;
      height: 40%;
    }

    img {
      float: right;
    }
  }

  .text-container {
    float: right;
    width: 60%;
    text-align: left;
    justify-content: center;

    p:first-of-type {
      padding-top: 15%;
    }

    p {
      padding-left: 10%;
      margin-top: 10px;
      margin-bottom: 10px;
      line-height: 1.5;
    }

  }
}

.fifth-piece {
  background-image: url("@/assets/images/bg5.png");
  background-repeat: repeat;
  background-size: 100% 100%;
  height:3rem;
  text-align: center;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size: x-large;

  .image-container {
    position: relative;
    width: 50%;
    float: right; // 让图片浮动在左侧  

    .base-image {
      display: block;
      width: 50%;
      height: 30%;
      margin-top: 5%;
      margin-right: 30%;
    }

    .overlay-image {
      position: relative;
      width: 20%;
      height: 40%;
      margin-top: 40%;
      /* 调整叠加图片的位置 */
      left: 55%;
      /* 调整叠加图片的位置 */
      z-index: 1;
      /* 设置叠加图片的层叠顺序，值越大表示越在上面 */
    }

    img {
      float: right;
    }
  }

  .text-container {
    float: left;
    width: 50%;
    text-align: right;
    justify-content: center;

    p:first-of-type {
      padding-top: 15%;
    }

    p {
      padding-left: 10%;
      margin-top: 10px;
      margin-bottom: 10px;
      line-height: 1.5;
    }

  }
}

.six-piece {
  
  background-repeat: repeat;
  background-size: 100% 100%;
  height: 3rem;
  text-align: center;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size: x-large;



  .image-container {
    position: relative;
    width: 40%;
    float: left; // 让图片浮动在左侧  

    .base-image {
      display: block;
      width: 68%;
      height: 30%;
      margin-top: 5%;
    }

    img {
      float: right;
    }
  }

  .text-container {
    float: right;
    width: 60%;
    text-align: left;
    justify-content: center;

    p:first-of-type {
      padding-top: 15%;
    }

    p {
      padding-left: 10%;
      margin-top: 10px;
      margin-bottom: 10px;
      line-height: 1.5;
    }

  }
}

.seven-piece {
  background-image: url("@/assets/images/bg7.png");
  background-repeat: repeat;
  background-size: 100% 100%;
  height: 3rem;
  text-align: center;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size: x-large;


  .image-container {
    position: relative;
    width: 50%;
    float: right; // 让图片浮动在左侧  

    .base-image {
      display: block;
      width: 50%;
      height: 30%;
      margin-top: 5%;
      margin-right: 10%;
    }

    .overlay-image {
      position: relative;
      width: 20%;
      height: 40%;
      top: 30%;
      /* 调整叠加图片的位置 */
      left: 25%;
      /* 调整叠加图片的位置 */
      z-index: 1;
      /* 设置叠加图片的层叠顺序，值越大表示越在上面 */
    }

    img {
      float: right;
    }
  }

  .text-container {
    float: left;
    width: 50%;
    text-align: left;
    justify-content: center;

    p:first-of-type {
      padding-top: 15%;
    }

    p {
      padding-left: 10%;
      margin-top: 10px;
      margin-bottom: 10px;
      line-height: 1.5;
    }

  }
}

.eight-piece {
  background-image: url("@/assets/images/bg10.png");
  background-repeat: repeat;
  background-size: 100% 100%;
  height: 3rem;
  text-align: center;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size: x-large;

  .title-font {
    display: inline-block;
    margin-top: 10%;
    margin-bottom: 4%;
    font-family: 'Courier New', Courier, monospace;
    font-size: xx-large;
    color: aliceblue;
  }
}